'use client'
import React, { useState, useEffect } from 'react';
import Link from 'next/link';
import { useContext } from 'react';
import AuthContext from '../../context/AuthContext';
import { get } from '../../utils/axios'
import Banner from '../../components/Banner';

export default function BlogPage() {
  const [posts, setPosts] = useState([])
  const [banners, setBanners] = useState([])
  const { user, logout } = useContext(AuthContext)

  async function fetchData() {
    try {
      // 获取博客文章数据
      const postsResponse = await get('/api/post');
      if (postsResponse && postsResponse.data) {
        setPosts(postsResponse.data);
      }

      // 获取轮播图数据
      const bannersResponse = await get('/api/banner/active');
      if (bannersResponse && bannersResponse.data) {
        setBanners(bannersResponse.data);
      }
    } catch (error) {
      console.error('获取数据失败:', error);
    }
  }

  useEffect(() => {
    fetchData()
  }, [])

  return (
    <div className="min-h-screen bg-gray-50">
      {/* 导航栏 */}
      <header className="bg-white shadow">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex justify-between h-16">
            <div className="flex items-center">
              <Link href="/" className="text-xl font-bold text-indigo-600">
                我的博客
              </Link>
              <Link href="/members" className="text-gray-700 hover:text-indigo-600">
                会员管理
              </Link>
            </div>
            <div className="flex items-center">
              {user ? (
                <div className="flex items-center space-x-4">
                  <span className="text-gray-700">欢迎, {user.name}</span>
                  <button onClick={logout} className="bg-indigo-600 text-white px-4 py-2 rounded-md text-sm font-medium hover:bg-indigo-700">
                    登出
                  </button>
                </div>
              ) : (
                <Link href="/auth/login" className="bg-indigo-600 text-white px-4 py-2 rounded-md text-sm font-medium hover:bg-indigo-700">
                  登录
                </Link>
              )}
            </div>
          </div>
        </div>
      </header>

      <main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
        {/* 轮播图组件 */}
        {banners.length > 0 && <Banner banners={banners} autoplay={true} interval={5000} />}

        <div className="flex justify-between items-center mb-8">
          <h1 className="text-3xl font-bold text-gray-900">博客文章</h1>
          {user && (
            <a href="/blog/editor" className="bg-indigo-600 text-white px-4 py-2 rounded-md text-sm font-medium hover:bg-indigo-700">
              创建新文章
            </a>
          )}
        </div>

        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
          {posts.map(post => (
            <div key={post.id} className="bg-white rounded-lg shadow-md overflow-hidden">
              <img src="https://inews.gtimg.com/om_bt/Oz0RYRVc-tMHsRFAyEHEUmy8Bi06W7LGS3Zxm1ssGaDXUAA/1000" alt={post.title} className="w-full h-48 object-cover" />
              <div className="p-6">
                <div className="flex items-center text-sm text-gray-500 mb-2">
                  <span>{post.author}</span>
                  <span className="mx-2">•</span>
                  <span>{post.date}</span>
                </div>
                <h2 className="text-xl font-bold text-gray-900 mb-2">{post.title}</h2>
                <p className="text-gray-600 mb-4">{post.excerpt}</p>
                <div className="flex items-center justify-between">
                  <Link href={`/blog/${post.id}`} className="inline-flex items-center text-indigo-600 hover:text-indigo-800">
                    阅读更多
                    <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4 ml-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M14 5l7 7m0 0l-7 7m7-7H3" />
                    </svg>
                  </Link>
                  {user && post.user && post.user.id === user.id && (
                    <a href={`/blog/editor/?postId=${post.id}`} className="inline-flex items-center text-green-600 hover:text-green-800">
                      编辑
                      <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4 ml-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" />
                      </svg>
                    </a>
                  )}
                </div>
              </div>
            </div>
          ))}
        </div>
      </main>
    </div>
  )
}